<template>
  <section class="registration-form">
	  		<div class="action-bar">
                  <el-button type="primary" size="medium" @click="gradVisible=true">添加</el-button>
            </div>	


		<!--列表-->
		
		 <vxe-table
		 		ref="tablea"
				border
				resizable
				row-id="id"
				show-overflow
				height="auto"
				:data.sync="users"
				:edit-config="{trigger: 'click', mode: 'cell'}"
				@edit-actived="editActivedEvent"
				@edit-disabled="editDisabledEvent"
				@edit-closed="editClosedEvent">
				<vxe-table-column type="seq" width="40"></vxe-table-column>
				<vxe-table-column field="real_name" title="等级"></vxe-table-column>
				<vxe-table-column field="phone" title="头衔" :edit-render="{name: 'input'}"></vxe-table-column>
				<vxe-table-column field="wechat" title="所属经验值" :edit-render="{name: 'input'}"></vxe-table-column>
				<vxe-table-column field="cost" title="创建者"></vxe-table-column>
				<vxe-table-column field="is_cost" title="创建时间"></vxe-table-column>
				<vxe-table-column field="guest_count" title="更新者"></vxe-table-column>
				<vxe-table-column title="操作">
					<template v-slot="{row}">
						<div>
							<vxe-button @click="editorGrad(row.id)">编辑</vxe-button>
                            <vxe-button @click="deleteGrad(row.id)">删除</vxe-button>
						</div>
					</template>
					
				</vxe-table-column>
			</vxe-table>
			<el-col :span="24" class="footer-bar">
				<div class="page-code">
					<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
				</div>
			</el-col>
		<!-- 查看详情 -->
    <el-dialog title="等级"  :visible.sync="gradVisible" width="450px">
			<el-form  label-position="left" label-width="85px">
				<el-form-item label="等级（新增时接口获取）" label-width="140px">
					222
				</el-form-item>
				<el-form-item label="头衔">
					<el-input placeholder="输入头衔" v-model="name"></el-input>
				</el-form-item>
				<el-form-item label="所需经验值">
					<el-input placeholder="输入头衔" v-model="experience"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="gradVisible = false">确定</el-button>
			</div>
		</el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			id:'',
			gradVisible: false,//详情是否显示
			users:[{}],
			page:1,
			totalPage:0,
			name:'',//头衔
			experience:'',//所需经验
		}
	},
	methods:{
		async getActivitySignuplist(){
			//获取签到列
			const res=await this.$api.getActivitySignuplist({
				page:this.page,
				isSign:this.signState,
				id:this.id
			})
			if(res.data.level=='success'){
					this.users=res.data.data.user_activity_list;
					this.totalPage=res.data.data.total
				}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getActivitySignuplist()
		},
		editActivedEvent ({ row, column }, event) {
				console.log(`打开 ${column.title} 列编辑`)
			},
		editClosedEvent ({ row, column }, event) {
			console.log('关闭')
		},
		editDisabledEvent(){},
		activeRowMethod({row}){
			return row.is_set_seat!=0
		},
		editorGrad(){
			//编辑
			this.gradVisible=true
		},
		async deleteGrad(){
			//删除
			let judge=null
            try {
              judge=  await this.$confirm('删除该等级规则?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            console.log(judge)
		}
	},
	mounted() {
		// this.id=this.$route.query.id;
		// this.getActivitySignuplist()
	},
}
</script>
<style lang='scss' scoped>
  .registration-form{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
            margin: 10px 0px;
            box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
			.registration-form-text{
				color: #666666;
			}
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.registration-form .vxe-table.vxe-editable .vxe-body--column{
		line-height: 48px;
	}

	.registration-form .el-dialog__body{overflow: auto;}


</style>
